<!DOCTYPE html>
<html>
<head>
    <title>data linkage</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script src="./vendor/avalon/avalon.js" ></script>
    <style>
    </style>
    <script type="text/javascript">

        if (!Date.now) {//fix 旧式IE
            Date.now = function() {
                return new Date - 0;
            }
        }
        var model = avalon.define({
            $id: "test",
            selected: "name",
            options: ["name", "size", "date"],
            trend: 1,
            data: [
                {name: "aaa", size: 213, date: Date.now() + 20},
                {name: "bbb", size: 4576, date:Date.now() - 4},
                {name: "ccc", size: 563, date: Date.now() - 7},
                {name: "eee", size: 3713, date: Date.now() + 9},
                {name: "555", size: 389, date: Date.now() - 20}
            ]
        })
        model.$watch("selected", function(v) {
            var t = parseFloat(model.trend)
            model.data.sort(function(a, b) {
                if (v === "name") {
                    return t * a[v].localeCompare(b[v])
                } else {
                    var ret = a[v] > b[v] ? 1 : -1
                    return t * ret
                }
            })
        })
        model.$watch("trend", function(t) {
            var v = model.selected, t = parseFloat(t)
            model.data.sort(function(a, b) {
                var ret = a[v] > b[v] ? 1 : -1
                return t * ret
            })
        })

 

    </script>
        
</head>
<body>


    <div ms-controller="test">
        <div style="color:red">
            <p>本例子用于显示如何做一个简单的表格排序</p>
            <p>ms-repeat="array"相当于ms-repeat-el="array" </p>
        </div>
        <p>
            <select ms-duplex="selected">
                <option  ms-repeat="options">{{el}}</option>
            </select>
            <select ms-duplex="trend">
                <option value="1">up</option>
                <option value="-1">down</option>
            </select>
        </p>
        <table width="500px" border="1">
            <tbody >
                <tr ms-repeat="data">
                    <td>{{el.name}}</td> <td>{{el.size}}</td> <td>{{el.date}}</td>
                </tr>
            </tbody>
        </table>
    </div>



</body>
</html>
